<template>
  <div class="common-layout">
    <el-container>
      <el-main class="main-zhuti">
        <el-header>
          <span class="header-main-1"></span>
          <span class="header-main-2">所有主播</span>
          <span class="header-main-3">一般</span>
          <span class="header-main-4">热门</span>
        </el-header>
        <el-main class="main-list">
          <!-- 编辑按钮 -->
          <img
            src="../../../img/主播列表/编辑.png"
            alt=""
            class="main-list-img"
          />
          <!-- 主播列表 -->
          <el-row :gutter="24" >
            <el-col :span="5" :push="2">
              <div class="grid-content ep-bg-purple">
                <div class="main-list-a">
                  <img
                    src="../../../img/主播列表/佳琪头像.png"
                    alt=""
                    class="touxiang"
                  />
                  <div class="main-list-name">李佳琪AUSTIN</div>
                  <div class="main-list-id">
                    ID:
                    <span class="main-list-id-sp">986712</span>
                    <span class="main-list-sex"> ♂ </span>
                  </div>
                  <span class="main-list-age">29岁</span>
                </div>
                <div class="main-list-l">查看详情</div>
              </div>
            </el-col>
            <el-col :span="5" :push="2">
              <div class="grid-content ep-bg-purple">
                <div class="main-list-a">
                  <img
                    src="../../../img/主播列表/薇娅.png"
                    alt=""
                    class="touxiang"
                  />
                  <div class="main-list-name">薇娅VIVIA</div>
                  <div class="main-list-id">
                    ID:
                    <span class="main-list-id-sp">986732</span>
                    <span class="main-list-sex"> ♀ </span>
                  </div>
                  <span class="main-list-age">29岁</span>
                </div>
                <div class="main-list-l">查看详情</div>
              </div>
            </el-col>
            <el-col :span="5" :push="2"
              ><div class="grid-content ep-bg-purple">
                <div class="main-list-a">
                  <img
                    src="../../../img/主播列表/王嘉尔头像.png"
                    alt=""
                    class="touxiang"
                  />
                  <div class="main-list-name">王嘉尔JACKSON WANG</div>
                  <div class="main-list-id">
                    ID:
                    <span class="main-list-id-sp">986712</span>
                    <span class="main-list-sex"> ♂ </span>
                  </div>
                  <span class="main-list-age">29岁</span>
                </div>
                <div class="main-list-l">查看详情</div>
              </div>
            </el-col>
            <el-col :span="5" :push="2"
              ><div class="grid-content ep-bg-purple">
                <div class="main-list-a">
                  <img
                    src="../../../img/主播列表/王一博头像.png"
                    alt=""
                    class="touxiang"
                  />
                  <div class="main-list-name">王一博-博YiBo</div>
                  <div class="main-list-id">
                    ID:
                    <span class="main-list-id-sp">986712</span>
                    <span class="main-list-sex"> ♂ </span>
                  </div>
                  <span class="main-list-age">29岁</span>
                </div>
                <div class="main-list-l">查看详情</div>
              </div>
            </el-col>
          </el-row>
          <el-row :gutter="24">
            <el-col :span="5" :push="2">
              <div class="grid-content ep-bg-purple">
                <div class="main-list-a">
                  <img
                    src="../../../img/主播列表/迪丽热巴头像.png"
                    alt=""
                    class="touxiang"
                  />
                  <div class="main-list-name">迪丽热巴DILRABA</div>
                  <div class="main-list-id">
                    ID:
                    <span class="main-list-id-sp">986712</span>
                    <span class="main-list-sex"> ♀ </span>
                  </div>
                  <span class="main-list-age">29岁</span>
                </div>
                <div class="main-list-l">查看详情</div>
              </div>
            </el-col>
            <el-col :span="5" :push="2">
              <div class="grid-content ep-bg-purple">
                <div class="main-list-a">
                  <img
                    src="../../../img/主播列表/易烊千玺头像.png"
                    alt=""
                    class="touxiang"
                  />
                  <div class="main-list-name">易炸千玺JACKSON YEE</div>
                  <div class="main-list-id">
                    ID:
                    <span class="main-list-id-sp">986732</span>
                    <span class="main-list-sex"> ♂ </span>
                  </div>
                  <span class="main-list-age">29岁</span>
                </div>
                <div class="main-list-l">查看详情</div>
              </div>
            </el-col>
            <el-col :span="5" :push="2">
              <div class="grid-content ep-bg-purple">
                <div class="main-list-a">
                  <img
                    src="../../../img/主播列表/杨幂头像.png"
                    alt=""
                    class="touxiang"
                  />
                  <div class="main-list-name">杨幂MINI</div>
                  <div class="main-list-id">
                    ID:
                    <span class="main-list-id-sp">986712</span>
                    <span class="main-list-sex"> ♀ </span>
                  </div>
                  <span class="main-list-age">29岁</span>
                </div>
                <div class="main-list-l">查看详情</div>
              </div>
            </el-col>
            <el-col :span="5" :push="2">
              <div class="grid-content ep-bg-purple">
                <div class="main-list-b">
                  <img
                    src="../../../img/主播列表/添加图.png"
                    alt=""
                    class="main-tianjia"
                  />
                  <div class="main-tian-live">添加主播</div>
                </div>
              </div>
            </el-col>
          </el-row>
        </el-main>
        <el-pagination background layout="prev, pager, next" :total="100" />
      </el-main>
    </el-container>
  </div>
</template>

<style lang="less" scoped>
.main-zhuti {
  background-color: #fff;
  border-radius: .3125rem;
  padding: 0;
  padding-top: 1rem;
  .el-header {
    width: 100%;
    height: 4rem;
    background: #f5f5f5;
    padding: 0;
    position: relative;
    .header-main-1 {
      display: block;
      width: .125rem;
      height: 1rem;
      background: #313033;
      position: absolute;
      top: 1.5rem;
      left: 3.125rem;
    }
    .header-main-2 {
      display: block;
      height: 1rem;
      font-size: 1rem;
      font-family: Microsoft YaHei;
      font-weight: bold;
      color: #313033;
      line-height: .0625rem;
      position: absolute;
      top: 1.875rem;
      left: 4.25rem;
    }
    .header-main-3 {
      width: 1.75rem;
      height: .75rem;
      font-size: .875rem;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #cccccc;
      line-height: .0625rem;
      position: absolute;
      top: 1.875rem;
      right: 5.625rem;
    }
    .header-main-4 {
      width: 2.125rem;
      height: .75rem;
      font-size: .875rem;
      font-family: Microsoft YaHei;
      font-weight: bold;
      color: #8b68ff;
      line-height: .0625rem;
      position: absolute;
      top: 1.875rem;
      right: 2.1875rem;
    }
  }
  // 主播列表
  .main-list {
    position: relative;
    overflow: hidden;

    .main-list-img {
      position: absolute;
      right: 2rem;
      top: .6875rem;
    }

    .el-row {
      margin-bottom: 1.25rem;
      margin-top:50px
    }
    .el-row:last-child {
      margin-bottom: 0;
    }
    .el-col {
      border-radius: .875rem;
    }

    .grid-content {
      border-radius: .25rem;
      min-height: 20rem;
      background-color: #8b68ff;
      position: relative;
      .main-list-a {
        width: 98%;
        height: 17.5rem;
        background-color: #fff;
        border-radius: .375rem .375rem 0 0;
        position: absolute;
        top: .1875rem;
        left: .1875rem;
        position: relative;
        .touxiang {
          width: 10rem;
          height: 10rem;
          position: absolute;
          top: 5%;
          left: 50%;
          transform: translateX(-50%);
        }
        .main-list-name {
          width:100%;
          font-size: 1.25rem;
          font-weight: 600;
          position: absolute;
          top: 65%;
          left: 50%;
          transform: translateX(-50%);
          text-align: center;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }
        .main-list-id {
          font-size: 1rem;
          font-weight: 600;
          position: absolute;
          color: #8b68ff;
          top: 80%;
          left: 35%;
          transform: translateX(-50%);

          .main-list-id-sp {
            color: #000;
          }
          .main-list-sex {
            width: 1.25rem;
            height: 1.25rem;
            background-color: #8b68ff;
            border-radius: .625rem;
            position: absolute;
            margin-left: .625rem;
            width: 1.25rem;
            height: 20px;
            color: #fff;
            font-size: 1rem;
            font-weight: 900;
            line-height: 1.25rem;
            text-align: center;
          }
        }
        .main-list-age {
          font-size: 1.125rem;
          font-weight: 600;
          display: block;
          position: absolute;
          color: #000;
          margin-left: .625rem;
          position: absolute;
          top: 80%;
          left: 70%;
          transform: translateX(-50%);
        }
      }
      .main-list-b {
        width: 98%;
        height: 98%;
        background-color: #fff;
        border-radius: .375rem;
        position: absolute;
        top: .1875rem;
        left: .1875rem;
        .main-tianjia{
            position: absolute;
            top:40%;
            left: 50%;
            transform: translate(-50%,-50%);
        }
        .main-tian-live{
            color: #000;
            font-size: 1.25rem;
            font-weight: 600;
            position: absolute;
            top: 60%;
            left: 50%;
            transform: translate(-50%,-50%);
        }
      }
      .main-list-l {
        width: 6.25rem;
        height: 1.25rem;
        position: absolute;
        color: #fff;
        font-size: 1.25rem;
        left: 50%;
        top: 90%;
        transform: translateX(-50%);
      }
    }
  }
}
</style>
